<mat-dialog-content>

  <div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="space-between">

    <div>
      <h2 mat-dialog-title>Session properties</h2>
      <mat-form-field>
        <mat-select placeholder="MediaMode" [(ngModel)]="sessionProperties.mediaMode">
          <mat-option *ngFor="let enumerator of enumToArray(mediaMode)" [value]="enumerator">
            {{ enumerator }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <mat-select placeholder="RecordingMode" [(ngModel)]="sessionProperties.recordingMode"
          id="recording-mode-select">
          <mat-option *ngFor="let enumerator of enumToArray(recordingMode)" [value]="enumerator">
            <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
          </mat-option>
        </mat-select>
      </mat-form-field>

      <app-recording-properties [(recordingProperties)]="sessionProperties.defaultRecordingProperties">
      </app-recording-properties>

      <div id="allow-transcoding-checkbox-div">
        <mat-checkbox class="checkbox-form" [(ngModel)]="sessionProperties.allowTranscoding"
          id="allow-transcoding-checkbox">Allow Transcoding</mat-checkbox>
      </div>
      <mat-form-field>
        <mat-select placeholder="ForcedVideoCodec" [(ngModel)]="sessionProperties.forcedVideoCodec"
          id="forced-video-codec-select">
          <mat-option *ngFor="let enumerator of enumToArray(forceVideoCodec)" [value]="enumerator">
            <span [attr.id]="'option-' + enumerator">{{ enumerator }}</span>
          </mat-option>
        </mat-select>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="CustomSessionId" type="text" [(ngModel)]="sessionProperties.customSessionId">
      </mat-form-field>

      <label class="label">Turn configuration</label>
      <div id="turn-div">
        <mat-radio-group name="Turn configuration" [(ngModel)]="turnConf">
          <mat-radio-button value="auto">Auto</mat-radio-button>
          <mat-radio-button value="freeice">Freeice</mat-radio-button>
          <mat-radio-button value="manual">Manual</mat-radio-button>
        </mat-radio-group>
        <div *ngIf="turnConf === 'manual'" id="manual-turn-div">
          <mat-form-field style="width: 100%">
            <input matInput placeholder="url" type="text" [(ngModel)]="manualTurnConf.urls[0]">
          </mat-form-field>
          <mat-form-field style="width: 48%; padding-right: 2px">
            <input matInput placeholder="user" type="text" [(ngModel)]="manualTurnConf.username">
          </mat-form-field>
          <mat-form-field style="width: 48%; padding-left: 2px">
            <input matInput placeholder="pass" type="text" [(ngModel)]="manualTurnConf.credential">
          </mat-form-field>
        </div>
      </div>

    </div>

    <div>
      <h2 mat-dialog-title>User configuration</h2>

      <label class="label">Role</label>
      <div id="role-div">
        <mat-radio-group name="Role" [(ngModel)]="connectionProperties.role">
          <mat-radio-button id="radio-btn-sub" value="SUBSCRIBER">SUB</mat-radio-button>
          <mat-radio-button id="radio-btn-pub" value="PUBLISHER">PUB</mat-radio-button>
          <mat-radio-button id="radio-btn-mod" value="MODERATOR">MOD</mat-radio-button>
        </mat-radio-group>
      </div>

      <label class="label" style="margin-bottom: 8px">Kurento config</label>
      <div id="kurento-config-div">
        <mat-form-field style="width: 39%; margin-right: 5px">
          <input matInput placeholder="Max recv" type="number"
            [(ngModel)]="connectionProperties.kurentoOptions.videoMaxRecvBandwidth">
        </mat-form-field>
        <mat-form-field style="width: 39%">
          <input matInput placeholder="Min recv" type="number"
            [(ngModel)]="connectionProperties.kurentoOptions.videoMinRecvBandwidth">
        </mat-form-field>
        <mat-form-field style="width: 39%; margin-right: 5px">
          <input matInput placeholder="Max send" type="number"
            [(ngModel)]="connectionProperties.kurentoOptions.videoMaxSendBandwidth">
        </mat-form-field>
        <mat-form-field style="width: 39%">
          <input matInput placeholder="Min send" type="number"
            [(ngModel)]="connectionProperties.kurentoOptions.videoMinSendBandwidth">
        </mat-form-field>
        <mat-chip-list *ngIf="filters.length > 0">
          <mat-chip style="height: 20px" *ngFor="let filterName of filters"
            (click)="filters.splice(filters.indexOf(filterName, 1))">{{filterName}}</mat-chip>
        </mat-chip-list>
        <mat-form-field style="width: 70%">
          <input matInput placeholder="Allowed filter" id="allowed-filter-input" type="text" [(ngModel)]="filterName">
        </mat-form-field>
        <button id="add-allowed-filter-btn" mat-icon-button style="width: 24px; height: 24px; line-height: 24px;"
          title="Add allowed filter" (click)="filters.push(filterName); filterName = '';">
          <mat-icon style="font-size: 18px; line-height: 18px; width: 18px; height: 18px"
            aria-label="Add allowed filter">
            add_circle</mat-icon>
        </button>
      </div>

      <div id="record-div">
        <mat-checkbox class="checkbox-form" [(ngModel)]="connectionProperties.record" id="record-checkbox">Record
        </mat-checkbox>
      </div>

      <label class="label">Token</label>
      <div id="custom-token-div">
        <mat-form-field>
          <input matInput placeholder="Custom token" type="text" [(ngModel)]="customToken">
        </mat-form-field>
      </div>

      <div id="force-publishing-div">
        <mat-checkbox class="checkbox-form" [(ngModel)]="forcePublishing" id="force-publishing-checkbox">Force
          publishing
        </mat-checkbox>
      </div>

    </div>

  </div>
</mat-dialog-content>

<mat-dialog-actions>
  <button id="cancel-btn" mat-button [mat-dialog-close]="undefined">CANCEL</button>
  <button id="save-btn" mat-button
    [mat-dialog-close]="{sessionProperties: sessionProperties, turnConf: turnConf, manualTurnConf: manualTurnConf, customToken: customToken, forcePublishing: forcePublishing, connectionProperties: generateConnectionProperties()}">SAVE</button>
</mat-dialog-actions>
